import { NextPage } from "next";
import { useState } from "react";
import { TabTypes } from "../types/globalSearch";
import { Tabs } from "antd";
import { map } from "lodash";
import GlobalSearchChild from "../components/GlobalSearch/Child";

const GlobalSearch: NextPage = () => {
  const [tab, setTab] = useState<TabTypes>(TabTypes.人脸);
  const tabKeys = [
    {
      key: "face",
      label: "人脸",
    },
    {
      key: "ocr",
      label: "文字",
    },
    {
      key: "element",
      label: "标签",
    },
    {
      key: "image",
      label: "图像",
    },
  ];
  const tabCode = (
    <Tabs
      items={[
        {
          key: "face",
          label: "人脸",
        },
        {
          key: "ocr",
          label: "文字",
        },
        {
          key: "element",
          label: "标签",
        },
        {
          key: "image",
          label: "图像",
        },
      ]}
      activeKey={tab.toString()}
      onChange={(k) => setTab(k)}
    />
  );

  return map(tabKeys, ({ key }) => (
    <div
      style={{ display: tab === key ? "block" : "none", width: "100%" }}
      key={key}
    >
      <GlobalSearchChild tab={key} headerInfo={tabCode} />
    </div>
  ));
};

export default GlobalSearch;
